<template>
    <div class="auto-archive-container">
        <div class="auto-archive-header">
            <!-- <span class="auto-archive-title">车辆档案 </span> -->
            <el-form ref="form" :model="form" label-width="90px" class="auto-archive-body-header">
                <el-form-item label="车牌号：" class="auto-archive-input" clearable>
                    <el-input v-model="form.InputAutoPlateNum" placeholder="请输入车牌号" prefix-icon="el-icon-search"></el-input>
                </el-form-item>
                <el-form-item label="座位数：" class="auto-archive-select">
                    <el-select v-model="form.InputSeatNum" class="auto-archive-select-item" clearable placeholder="请选择座位数">
                        <el-option v-for="(item, $index) in seatlist" :key="$index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="厂牌车型：" class="auto-archive-select">
                    <el-select v-model="form.SelectAutoType" placeholder="请选择厂牌车型" class="auto-archive-select-item"
                        clearable>
                        <el-option v-for="(item, $index) in typelist" :key="$index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" class="auto-archive-button">查询</el-button>
                <el-button type="primary" style="margin-left: 0;" class="auto-archive-button"
                    @click="ToAddAutoArchives">新建</el-button>
            </el-form>
        </div>

        <div class="auto-archive-body">
            <div class="auto-archive-horizon"></div>

            <div class="auto-archive-table">
                <el-table :data="this.filtedTableData" style="width: 100%">
                    <el-table-column prop="autoId" label="车辆编号" align="center">
                    </el-table-column>
                    <el-table-column prop="autoPlateNum" label="车牌号" align="center">
                    </el-table-column>
                    <el-table-column prop="autoFrameNum" label="车架号" align="center">
                    </el-table-column>
                    <el-table-column prop="autoType" label="车型" align="center">
                    </el-table-column>
                    <el-table-column prop="seatNum" label="座位数" align="center">
                    </el-table-column>

                    <el-table-column prop="gasCardNumber" label="加油卡号" align="center">
                    </el-table-column>
                    <el-table-column prop="autoAge" label="使用年限" align="center">
                    </el-table-column>
                    <el-table-column prop="autoColor" label="车辆颜色" align="center">
                    </el-table-column>
                    <el-table-column prop="autoColor" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="checkAndUpdate(scope.row)">详情</el-button>
                            <el-button style="color: red;" type="text" size="small" @click="AutoArchiveDelete(scope.row)">删除
                            </el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum"
                    :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total"
                    @size-change="handleSizeChange" @current-change="handlePageChange" style="padding-right: 30px;" />
            </div>
        </div>

    </div>
</template>

<script>
import { getAutoPage } from '../../api/archives'
import { autoArchiveDelete } from '../../api/archives'
import { getDriverList } from '../../api/archives'
export default {
    name: "AutoArchives",
    data() {
        return {
            tableData: [],
            form: {
                InputAutoPlateNum: null,
                SelectAutoType: null,
                InputSeatNum: null,
            },
            typelist: ["货车", "客车", "商务车"],
            seatlist: [5, 6, 7, 10, 20, 30],
            driverlist: [],

            //分页相关数据
            tablePage: {
                pageNum: 1, // 第几页
                pageSize: 8, // 每页多少条
                total: 0 // 总记录数
            },
            BasicDataPage: null,
            pageSizes: [4, 8],
        }
    },
    computed: {
        filtedTableData() {
            if (!this.form.InputAutoPlateNum && !this.form.InputSeatNum && !this.form.SelectAutoType) {
                return this.getPageList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
            } else {
                return this.getPageList(this.tableData.filter((value) => {
                    const PlateNumMatch = !this.form.InputAutoPlateNum || value.autoPlateNum.includes(this.form.InputAutoPlateNum);
                    const typeMatch = !this.form.SelectAutoType || value.autoType.includes(this.form.SelectAutoType);
                    const SeatNumMatch = !this.form.InputSeatNum || value.seatNum.toString().includes(this.form.InputSeatNum);
                    return PlateNumMatch && typeMatch && SeatNumMatch;
                }), this.tablePage.pageNum, this.tablePage.pageSize)
            }
        }
    },
    methods: {
        checkAndUpdate(row) {
            this.$router.push({
                path: "/UpgradeAutoArchives",
                query: {
                    InputAutoId: row.autoId,
                    InputAutoPlateNum: row.autoPlateNum,
                    InputAutoFrameNum: row.autoFrameNum,
                    SelectAutoType: row.autoType,
                    InputSeatNum: row.seatNum,
                    SelectLicenseType: row.licenseType,
                    InputGasCardNumber: row.gasCardNumber,
                    InputAutoAge: row.autoAge,
                    InputAutoColor: row.autoColor
                }
            });
        },

        AutoArchiveDelete(row) {
            this.$confirm('此操作将删除该车辆档案, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                autoArchiveDelete(row.autoId).then(res => {
                    if (res.data.code == '0') {
                        this.$message({
                            message: "删除成功",
                            duration: 2000,
                            showClose: true,
                            type: 'success'
                        });
                        setTimeout(() => {
                            location.reload();
                        }, 700)
                    }
                    else {
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        initTableData() {
            getAutoPage().then(res => {
                this.tableData = res.data.data
            })
        },
        initDriverList() {
            getDriverList().then(res => {
                const temp = res.data.data;
                const result = [];
                temp.forEach(element => { result.push(Object.values(element)) });
                result.forEach(element => { this.AutoArchives.SelectDriverOptions.push(element[1]) });

            }).catch((err) => {
                console.log(err);
            })
        },
        // 分页
        handlePageChange(currentPage) {
            this.tablePage.pageNum = currentPage
            // 在此刷新数据
            this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
        },
        handleSizeChange(pageSize) {
            this.tablePage.pageSize = pageSize
            // 在此刷新数据
            this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
        },
        getList(data, num, size) {
            let list, start, end
            start = (num - 1) * size
            end = start + size
            list = data.filter((item, index) => {
                return index >= start && index < end
            })
            list.forEach((item, index) => {
                item.seq = index + start
            })
            return list
        },
        getPageList(data, num, size) {
            this.tablePage.total = data.length
            this.BasicDataPage = this.getList(data, num, size)
            return this.BasicDataPage
        },
        ToAddAutoArchives() {
            this.$router.push('/Home/AddAutoArchives')
        },
        ToUpgradeAutoArchives() {
            this.$router.push('/UpgradeAutoArchives')
        }
    },
    mounted() {
        this.initTableData();
    },


}
</script>

<style scoped>
.auto-archive-container {
    height: 100%;
    width: 95%;
    margin: 0 auto;
    margin-top: 1%;
    justify-content: center;
    background-color: #fff;
}

.auto-archive-table {
    width: 90%;
    margin: 0px auto;
}

.auto-archive-title {
    font-size: 20px;
    justify-content: left;
    width: 10%;
}

.auto-archive-horizon {
    margin: 0 30px;
    height: 1.5px;
    background-color: #ebeef5;
}

.auto-archive-input {
    margin: 0 0px;
    width: 25%;
}

.auto-archive-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    width: 100%;
}

.auto-archive-body {
    width: 100%;
    height: 80%;
    margin: 20px auto;
}

.auto-archive-body-header {
    width: 95%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-archive-footer {
    width: 70%;
    height: 10%;
    margin: 0 auto;
}

.auto-archive-select {
    margin: 0 0 0 10px;
    width: 28%;
}

.auto-archive-select-item {
    width: 99%;
}

.auto-archive-button {
    margin: 0 20px;
}

.pagination {
    width: 100%;
    margin: 25px auto;
    /* text-align: right; */
}
</style>